<template>
  <div class="tab-content">
    <avue-crud
      :option="materialTableOption"
      :table-loading="tableLoading"
      :data="data"
      v-model="form"
      :page.sync="page"
      ref="mainCrud"
      @selection-change="selectionChange"
      @select="handleCheck"
      @current-change="currentChange"
      @size-change="sizeChange"
      @search-change="searchChange"
      @search-reset="searchReset"
      @tree-load="treeLoadData"
    >
    </avue-crud>
  </div>
</template>

<script>
import { getLazyList, getList } from '@/api/warehouse/materialRules';
import { getMaterialCategory } from '@/api/warehouse/materialStorageManagement';
export default {
  name: 'transfertable',
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      materialTableOption: {
        lazy: true,
        size: 'small',
        height: '300',
        calcHeight: 30,
        rowParentKey: 'parentId',
        rowKey: 'id',
        tip: false,
        searchShow: true,
        searchShowBtn: false,
        reserveSelection: true,
        border: true,
        index: false,
        addBtn: false,
        delBtn: false,
        viewBtn: false,
        editBtn: false,
        refreshBtn: false,
        selection: true,
        dialogClickModal: false,
        labelWidth: 120,
        searchLabelWidth: 110,
        columnBtn: false,
        searchMenuPosition: 'left',
        menu: false,
        column: [
          {
            label: '物料类别编码',
            prop: 'categoryCode'
          },
          {
            label: '物料类别',
            prop: 'categoryName',
            searchSpan: 20,
            search: true
          },
          {
            label: '物料类别',
            prop: 'categoryCode',
            control: () => {
              if (this.type === 'materialCategory') {
                return {
                  categoryCode: {
                    hide: false
                  }
                };
              } else
                return {
                  categoryCode: {
                    hide: true
                  }
                };
            }
          },
          {
            label: '物料编码',
            prop: 'categoryName',
            searchSpan: 20
          },
          {
            label: '物料名称',
            prop: 'categoryName',
            searchSpan: 20,
            search: true
          }
        ]
      },
      data: [],
      localData: [],
      form: {},
      tableLoading: false,
      templateData: [],
      selectionList: [],
      tempSelectionList: [],
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 1
      },
      fifoControlPart: ''
    };
  },
  mounted() {
    this.selectionList = [];
    this.page = {
      pageSize: 20,
      currentPage: 1,
      total: 1
    };
    if (this.type === 'materialCategory') {
      this.setCategoryOption();
      this.getCategoryData(this.page);
    } else {
      this.setMaterialOption();
      this.getMarteData(this.page);
    }
  },
  computed: {
    selectIdList() {
      return this.selectionList.map((i) => i.id);
    }
  },
  methods: {
    selectionChange(list) {
      this.selectionList = list;
    },
    handleCheck(selection, row) {
      if (selection.length) {
        this.$refs.mainCrud.toggleSelection(row.children || row);
      } else {
        this.$refs.mainCrud.toggleSelection(row.children || row);
      }
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      if (this.type === 'materialCategory') {
        this.getCategoryData(this.page);
      } else {
        this.getMarteData(this.page);
      }
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      if (this.type === 'materialCategory') {
        this.getCategoryData(this.page);
      } else {
        this.getMarteData(this.page);
      }
    },
    difference(parentSet, childSet) {
      // 使用 Set 数据结构来存储数组元素，以便进行快速查找
      const parent = new Set(parentSet);
      const child = new Set(childSet);
      // 使用 Array.from 将 Set 转换回数组
      return Array.from(new Set([...parent].filter((x) => !child.has(x))));
    },
    setCategoryOption() {
      const column = [
        {
          label: '类别编码',
          prop: 'code',
          search: true
        },
        {
          label: '类别名称',
          prop: 'name',
          search: true
        }
      ];
      const secondColumn = [
        // {
        //   label: '物料类别编码',
        //   prop: 'categoryCode'
        // },
        {
          label: '物料类别',
          prop: 'name',
          searchSpan: 20
        }
      ];
      this.$set(this.materialTableOption, 'column', column);
    },
    setMaterialOption() {
      const column = [
        {
          label: '物料编码',
          prop: 'partNo',
          search: true
        },
        {
          label: '物料名称',
          prop: 'name',
          searchSpan: 8,
          search: true
        },
        {
          label: '物料型号',
          prop: 'partModel',
          searchSpan: 8
        }
      ];
      this.$set(this.materialTableOption, 'column', column);
    },

    searchChange(params, done) {
      if (this.type === 'materialCategory') {
        this.getCategoryData(this.page, params);
      } else {
        this.getMarteData(this.page, params);
      }

      done();
    },
    searchReset() {
      if (this.type === 'materialCategory') {
        this.getCategoryData(this.page);
      } else {
        this.getMarteData(this.page);
      }
    },
    async getMarteData(page, params = {}) {
      try {
        this.tableLoading = true;
        const pageParams = {
          current: page.currentPage,
          size: page.pageSize
        };

        const res = await getList(Object.assign(pageParams, params));
        const data = res.data.data;
        this.data = data.records;
        this.page.total = data.total;
        this.page.pageSize = data.size;
      } catch (e) {
        console.warn(e);
      } finally {
        this.tableLoading = false;
      }
    },
    async getCategoryData(page, params = {}) {
      try {
        this.tableLoading = true;
        const pageParams = {
          current: page.currentPage,
          size: page.pageSize
        };
        const res = await getLazyList(Object.assign(pageParams, params, { parentId: 0 }));
        const data = res.data.data;
        this.data = data.records;
        this.page.total = data.total;
        this.page.pageSize = data.size;
        // this.localData = this._cloneDeep(this.data);
      } catch (e) {
        console.warn(e);
      } finally {
        this.tableLoading = false;
      }
    },
    async treeLoadData(tree, treeNode, resolve) {
      const parentId = tree.id;
      const res = await getMaterialCategory({ parentId });
      let data = res.data.data;
      resolve(data);
      if (this.selectIdList.includes(parentId)) {
        this.$refs.mainCrud.toggleSelection(data);
      }
      // resolve(tree.children);
    }
  }
};
</script>

<style scoped lang="scss">
.btn-container {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-content: center;
  flex-wrap: nowrap;
  align-items: center;

  .circle {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid #606266;
    &:hover {
      cursor: pointer;
      color: #0a84ff;
      border: 1px solid #0a84ff;
    }
  }
}
.tab-content {
  height: 550px;
  border: 1px solid #c0c4cc;
  padding: 8px;
}
.table-content {
  ::v-deep .avue-crud__menu {
    display: none;
  }
  //.dialog-footer {
  //  display: flex;
  //  align-items: center;
  //  justify-content: flex-end;
  //}
  //
  //::v-deep .el-pagination__jump {
  //  display: none;
  //}
}

//::v-deep .avue-crud__pagination {
//  position: absolute;
//}
</style>
